<template>
<div>
  <div class="view login" v-if="state.username === '' || state.username === null">
    <form class="login-form" @submit.prevent="Login">
      <div class="form-inner">
    <h1>Login to FireChat</h1>
       <label for="username">Username</label>
       <input type="text" v-model="inputUsername" placeholder="Please enter your username...">
       <input type="submit" value="Login">
    </div>
    </form>

  </div>

  <div class="view chat" v-else>
    <h1>Chat View</h1>
  </div>
  
</div>
</template>

<script>
import { reactive, onMounted, ref } from 'vue';
import db from './db';


export default {
  setup () {
    const inputUsername = ref("");
    const state = reactive({
      username: "",
      messages: []
    });
    
    const Login = () => {
      if (inputUsername.value != "" || inputUsername.value != null) {
        state.username = inputUsername.value;
        inputUsername.value = "";
      }
    }

     return {
      inputUsername,
      Login,
      state
    }
  }
}
</script>

I cant seem to figure out where am getting it wrong when state is defined I believe. the screen shows nothing. this code is literally from a tutorial i watched and exactly this worked even after getting code from the tutorial github repo it still shows this error